<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产线智能管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        :root {
            --primary-color: #0071e3;
            --secondary-color: #34c759;
            --danger-color: #ff3b30;
            --ppt: #FF7B29; /* PowerPoint 品牌橙色 */
            --excel: #10B981; /* Excel 品牌绿色 */
            --text-primary: #1d1d1f;
            --text-secondary: #6e6e73;
            --bg-primary: #ffffff;
            --bg-secondary: #f5f5f7;
            --border-color: #e2e2e7;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            line-height: 1.6;
        }
        
        /* 导航栏样式 - 固定高度避免左侧栏割裂 */
        .navbar {
            height: 61px; /* 固定高度，与左侧栏top值匹配 */
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            padding: 0.75rem 0;
            display: flex;
            align-items: center; /* 垂直居中内容 */
        }
        
        .navbar-brand {
            color: var(--text-primary);
            font-weight: 600;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .navbar-nav .nav-link {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-left: 1.5rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px; /* 图标与文字间距 */
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--primary-color);
        }
        
        /* 侧边栏样式 - 固定定位优化 */
        .sidebar {
            background-color: var(--bg-primary);
            border-right: 1px solid var(--border-color);
            height: calc(100vh - 61px); /* 视口高度减去导航栏高度 */
            position: sticky;
            top: 61px; /* 与导航栏底部对齐 */
            transition: var(--transition);
            overflow-y: auto; /* 内容超出时可滚动 */
            overflow-x: hidden;
            z-index: 100; /* 确保在主内容之上 */
        }
        
        .sidebar .nav {
            padding: 10px 0;
        }
        
        .sidebar .nav-link {
            color: var(--text-secondary);
            padding: 0.8rem 1.5rem;
            font-size: 0.9rem;
            border-left: 3px solid transparent;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px; /* 图标与文字间距 */
            cursor: pointer;
        }
        
        .sidebar .nav-link:hover {
            color: var(--primary-color);
            background-color: rgba(0, 113, 227, 0.05);
        }
        
        .sidebar .nav-link.active {
            color: var(--primary-color);
            border-left-color: var(--primary-color);
            background-color: rgba(0, 113, 227, 0.05);
        }
        
        /* 主内容区样式 */
        .main-container {
            padding: 2.5rem 2rem;
            min-height: calc(100vh - 61px); /* 确保主内容区高度足够 */
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 2rem;
            color: var(--text-primary);
        }
        
        /* 卡片样式 */
        .card {
            background-color: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }
        
        .card-header {
            background-color: transparent;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 8px; /* 卡片标题图标与文字间距 */
        }
        
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0;
            color: var(--text-primary);
        }
        
        .card-body {
            padding: 1.25rem;
        }
        
        /* 统计卡片样式 */
        .stat-card {
            text-align: center;
            padding: 1.5rem;
        }
        
        .stat-card .number {
            font-size: 2.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            transition: var(--transition);
        }
        
        .stat-card:hover .number {
            color: var(--primary-color);
        }
        
        .stat-card .label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        
        /* 选项卡样式 */
        .nav-tabs {
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 1.5rem;
        }
        
        .nav-tabs .nav-item {
            margin-bottom: -1px;
        }
        
        .nav-tabs .nav-link {
            color: var(--text-secondary);
            border: none;
            border-bottom: 2px solid transparent;
            padding: 0.75rem 1.5rem;
            font-size: 0.95rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px; /* 选项卡图标与文字间距 */
        }
        
        .nav-tabs .nav-link:hover {
            color: var(--primary-color);
            background-color: transparent;
            border-bottom-color: rgba(0, 113, 227, 0.3);
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }
        
        .tab-content {
            padding: 0;
        }
        
        .tab-pane {
            padding: 0;
        }
        
        /* 图表容器 */
        .chart-container {
            height: 420px;
            width: 100%;
        }
        
        /* 表格样式 */
        .table {
            color: var(--text-primary);
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .table thead {
            background-color: var(--bg-secondary);
        }
        
        .table th,
        .table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        
        .table-hover tbody tr:hover {
            background-color: rgba(0, 113, 227, 0.03);
        }
        
        /* 按钮样式 */
        .btn {
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            gap: 6px; /* 按钮图标与文字间距 */
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0066cc;
            color: white;
        }
        
        .btn-outline-primary {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: rgba(0, 113, 227, 0.1);
            color: var(--primary-color);
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }
        
        /* 表单样式 */
        .form-control {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            padding: 0.5rem 0.75rem;
            font-size: 0.9rem;
            transition: var(--transition);
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
            outline: none;
        }
        
        .form-select {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            padding: 0.5rem 0.75rem;
            font-size: 0.9rem;
            transition: var(--transition);
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
            outline: none;
        }
        
        .form-label {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 0.35rem;
        }
        
        /* 故障报警样式 */
        .alert-critical {
            background-color: rgba(255, 59, 48, 0.05);
            border-left: 3px solid var(--danger-color);
        }
        
        .list-group-item {
            border: none;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem;
            background-color: transparent;
        }
        
        .list-group-item:last-child {
            border-bottom: none;
        }
        
        /* 进度条样式 */
        .progress {
            height: 6px;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .progress-bar {
            background-color: var(--secondary-color);
            border-radius: 3px;
            transition: width 0.6s ease;
        }
        
        /* 徽章样式 */
        .badge {
            border-radius: 100px;
            padding: 0.2rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: rgba(52, 199, 89, 0.1);
            color: var(--secondary-color);
        }
        
        /* 导出按钮样式（匹配Office软件颜色） */
        .export-pdf {
            background-color: var(--ppt);
            color: white;
            transition: var(--transition);
        }
        
        .export-pdf:hover {
            background-color: #EA580C; /* PowerPoint 深色 hover */
            color: white;
        }
        
        .export-excel {
            background-color: var(--excel);
            color: white;
            transition: var(--transition);
        }
        
        .export-excel:hover {
            background-color: #059669; /* Excel 深色 hover */
            color: white;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .sidebar {
                height: auto;
                position: static;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                margin-bottom: 1rem;
            }
            
            .main-container {
                padding: 1.5rem 1rem;
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 768px) {
            .chart-container {
                height: 350px;
            }
            
            .navbar-nav .nav-link {
                margin-left: 0;
                margin-right: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fa fa-microchip"></i> 生产线智能管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-chart-bar"></i> 数据看板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-bell"></i> 故障警报</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-users"></i> 人员配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-user-circle"></i> 管理员</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid p-0">
        <div class="row g-0">
            <!-- 侧边栏 - 保留指定菜单项 -->
            <div class="col-lg-2 col-md-3 d-md-block sidebar">
                <div class="nav">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" id="sysOverviewLink" href="#">
                                <i class="fa fa-tachometer"></i> 系统概览
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="faultLink" href="#fault" data-bs-toggle="tab" role="tab" aria-controls="fault" aria-selected="false">
                                <i class="fa fa-exclamation-triangle"></i> 故障识别
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="analysisLink" href="#analysis" data-bs-toggle="tab" role="tab" aria-controls="analysis" aria-selected="false">
                                <i class="fa fa-line-chart"></i> 生产数据分析
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="schedulingLink" href="#scheduling" data-bs-toggle="tab" role="tab" aria-controls="scheduling" aria-selected="false">
                                <i class="fa fa-calendar"></i> 排班优化
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="reportsLink" href="#reports" data-bs-toggle="tab" role="tab" aria-controls="reports" aria-selected="false">
                                <i class="fa fa-file-text"></i> 报表中心
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="settingLink" href="#">
                                <i class="fa fa-cog"></i> 系统设置
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 主内容区 -->
            <div class="col-lg-10 col-md-9 ms-sm-auto main-container">
                <h1 class="page-title">生产线智能管理系统</h1>
                
                <!-- 系统概览统计卡片 -->
                <div class="row mb-4" id="sysOverviewCards">
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <div class="number">95%</div>
                            <div class="label">故障识别准确率</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <div class="number">10</div>
                            <div class="label">生产线数量</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <div class="number">42</div>
                            <div class="label">操作人员</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <div class="number">324,723</div>
                            <div class="label">周净合格数</div>
                        </div>
                    </div>
                </div>
                
                <!-- 选项卡导航 -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="fault-tab" data-bs-toggle="tab" data-bs-target="#fault" type="button" role="tab" aria-controls="fault" aria-selected="true">
                            <i class="fa fa-exclamation-triangle"></i> 故障识别
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="analysis-tab" data-bs-toggle="tab" data-bs-target="#analysis" type="button" role="tab" aria-controls="analysis" aria-selected="false">
                            <i class="fa fa-chart-bar"></i> 生产分析
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="scheduling-tab" data-bs-toggle="tab" data-bs-target="#scheduling" type="button" role="tab" aria-controls="scheduling" aria-selected="false">
                            <i class="fa fa-calendar"></i> 人员排班
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports" type="button" role="tab" aria-controls="reports" aria-selected="false">
                            <i class="fa fa-file-text"></i> 统计报表
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <!-- 故障识别选项卡 -->
                    <div class="tab-pane fade show active" id="fault" role="tabpanel" aria-labelledby="fault-tab">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-line-chart"></i>
                                        <h5 class="card-title">生产线故障实时监测</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="faultChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-bell"></i>
                                        <h5 class="card-title">故障报警</h5>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="list-group list-group-flush">
                                            <div class="list-group-item alert-critical">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="mb-1">M201 - 物料推送装置故障</h6>
                                                    <small>2分钟前</small>
                                                </div>
                                                <p class="mb-1">故障代码: 1001</p>
                                                <small>持续时间: 151秒</small>
                                            </div>
                                            <div class="list-group-item">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="mb-1">M202 - 填装装置故障</h6>
                                                    <small>15分钟前</small>
                                                </div>
                                                <p class="mb-1">故障代码: 4001</p>
                                                <small>持续时间: 87秒</small>
                                            </div>
                                            <div class="list-group-item">
                                                <div class="d-flex justify-content-between">
                                                    <h6 class="mb-1">M305 - 拧盖装置故障</h6>
                                                    <small>45分钟前</small>
                                                </div>
                                                <p class="mb-1">故障代码: 6002</p>
                                                <small>持续时间: 63秒</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card mt-4">
                                    <div class="card-header">
                                        <i class="fa fa-pie-chart"></i>
                                        <h5 class="card-title">故障统计</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="faultPieChart" style="height: 250px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center gap-8px;">
                                    <i class="fa fa-history"></i>
                                    <h5 class="card-title mb-0">历史故障数据</h5>
                                </div>
                                <div class="d-flex gap-2">
                                    <select class="form-select form-select-sm" style="width: auto; display: inline-block;">
                                        <option>选择生产线</option>
                                        <option>M201</option>
                                        <option>M202</option>
                                        <option>M301</option>
                                        <option>M302</option>
                                        <option>M303</option>
                                        <option>M304</option>
                                        <option>M305</option>
                                        <option>M306</option>
                                        <option>M307</option>
                                        <option>M308</option>
                                        <option>M309</option>
                                        <option>M310</option>
                                    </select>
                                    <button class="btn btn-sm btn-primary ms-2">
                                        <i class="fa fa-filter"></i> 筛选
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>生产线</th>
                                                <th>故障类型</th>
                                                <th>开始时间</th>
                                                <th>持续时长(秒)</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2023-08-15</td>
                                                <td>M201</td>
                                                <td>物料推送装置故障 1001</td>
                                                <td>10:23:45</td>
                                                <td>151</td>
                                                <td><span class="badge badge-success">已解决</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-08-15</td>
                                                <td>M202</td>
                                                <td>填装装置检测故障 4001</td>
                                                <td>09:45:12</td>
                                                <td>87</td>
                                                <td><span class="badge badge-success">已解决</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-08-14</td>
                                                <td>M305</td>
                                                <td>拧盖装置拧盖故障 6002</td>
                                                <td>14:32:09</td>
                                                <td>63</td>
                                                <td><span class="badge badge-success">已解决</span></td>
                                            </tr>
                                            <tr>
                                                <td>2023-08-14</td>
                                                <td>M308</td>
                                                <td>加盖装置定位故障 5001</td>
                                                <td>16:45:33</td>
                                                <td>42</td>
                                                <td><span class="badge badge-success">已解决</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 生产分析选项卡 -->
                    <div class="tab-pane fade" id="analysis" role="tabpanel" aria-labelledby="analysis-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-balance-scale"></i>
                                        <h5 class="card-title">生产线产量对比</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="productionChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-check-circle"></i>
                                        <h5 class="card-title">合格率分析</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="qualityChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-4">
                            <div class="card-header">
                                <i class="fa fa-bolt"></i>
                                <h5 class="card-title">生产线效率分析</h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label">选择生产线:</label>
                                            <select class="form-select" id="lineSelect">
                                                <option value="all">所有生产线</option>
                                                <option value="M301">M301</option>
                                                <option value="M302">M302</option>
                                                <option value="M303">M303</option>
                                                <option value="M304">M304</option>
                                                <option value="M305">M305</option>
                                                <option value="M306">M306</option>
                                                <option value="M307">M307</option>
                                                <option value="M308">M308</option>
                                                <option value="M309">M309</option>
                                                <option value="M310">M310</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label">时间范围:</label>
                                            <select class="form-select" id="timeRangeSelect">
                                                <option value="7">最近7天</option>
                                                <option value="30" selected>最近30天</option>
                                                <option value="90">最近3个月</option>
                                                <option value="180">最近6个月</option>
                                                <option value="365">最近1年</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label">&nbsp;</label>
                                            <button class="btn btn-primary w-100" onclick="updateCharts()">
                                                <i class="fa fa-refresh"></i> 应用筛选
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div id="efficiencyChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 人员排班选项卡 -->
                    <div class="tab-pane fade" id="scheduling" role="tabpanel" aria-labelledby="scheduling-tab">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-calendar-week"></i>
                                        <h5 class="card-title">本周排班表</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>操作员</th>
                                                        <th>周一</th>
                                                        <th>周二</th>
                                                        <th>周三</th>
                                                        <th>周四</th>
                                                        <th>周五</th>
                                                        <th>周六</th>
                                                        <th>周日</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>B001</td>
                                                        <td>M301早班</td>
                                                        <td>M302中班</td>
                                                        <td>休息</td>
                                                        <td>M303晚班</td>
                                                        <td>M304早班</td>
                                                        <td>休息</td>
                                                        <td>M305中班</td>
                                                    </tr>
                                                    <tr>
                                                        <td>B002</td>
                                                        <td>M306晚班</td>
                                                        <td>休息</td>
                                                        <td>M307早班</td>
                                                        <td>M308中班</td>
                                                        <td>休息</td>
                                                        <td>M309晚班</td>
                                                        <td>M310早班</td>
                                                    </tr>
                                                    <tr>
                                                        <td>B003</td>
                                                        <td>休息</td>
                                                        <td>M301晚班</td>
                                                        <td>M302早班</td>
                                                        <td>休息</td>
                                                        <td>M303中班</td>
                                                        <td>M304晚班</td>
                                                        <td>休息</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-sliders"></i>
                                        <h5 class="card-title">排班优化设置</h5>
                                    </div>
                                    <div class="card-body">
                                        <form id="schedulingForm">
                                            <div class="mb-3">
                                                <label class="form-label">生产线数量</label>
                                                <input type="number" class="form-control" value="10" min="1" max="20">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">操作人员数量</label>
                                                <input type="number" class="form-control" value="42" min="10" max="100">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">班次模式</label>
                                                <select class="form-select">
                                                    <option>早中晚三班制</option>
                                                    <option>早晚两班制</option>
                                                    <option>四班三运转</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">工作周期</label>
                                                <select class="form-select">
                                                    <option>做五休二</option>
                                                    <option>做四休三</option>
                                                    <option>做六休一</option>
                                                </select>
                                            </div>
                                            <div class="mb-3 form-check">
                                                <input type="checkbox" class="form-check-input" id="avoidNightMorning" checked>
                                                <label class="form-check-label" for="avoidNightMorning">避免晚班后接早班</label>
                                            </div>
                                            <button type="button" class="btn btn-primary w-100">
                                                <i class="fa fa-magic"></i> 生成最优排班
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                
                                <div class="card mt-4">
                                    <div class="card-header">
                                        <i class="fa fa-clipboard-check"></i>
                                        <h5 class="card-title">排班效果预测</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>预计周产量:</span>
                                            <strong>324,723</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>预计合格率:</span>
                                            <strong>99.87%</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>人员利用率:</span>
                                            <strong>92.4%</strong>
                                        </div>
                                        <div class="progress mb-3">
                                            <div class="progress-bar" role="progressbar" style="width: 92.4%;" aria-valuenow="92.4" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 统计报表选项卡 -->
                    <div class="tab-pane fade" id="reports" role="tabpanel" aria-labelledby="reports-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-calendar"></i>
                                        <h5 class="card-title">月度故障统计</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="monthlyFaultChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <i class="fa fa-chart-line"></i>
                                        <h5 class="card-title">生产效率趋势</h5>
                                    </div>
                                    <div class="card-body">
                                        <div id="productivityTrendChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center gap-8px;">
                                    <i class="fa fa-file-export"></i>
                                    <h5 class="card-title mb-0">报表生成</h5>
                                </div>
                                <div class="export-buttons d-flex gap-2">
                                    <button class="btn btn-sm export-pdf">
                                        <i class="fa fa-download"></i> 导出PDF
                                    </button>
                                    <button class="btn btn-sm export-excel">
                                        <i class="fa fa-file-excel-o"></i> 导出Excel
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">报表类型</label>
                                            <select class="form-select">
                                                <option>故障统计报表</option>
                                                <option>生产效率报表</option>
                                                <option>人员排班报表</option>
                                                <option>综合分析报表</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">开始日期</label>
                                            <input type="date" class="form-control" value="2023-01-01">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">结束日期</label>
                                            <input type="date" class="form-control" value="2023-12-31">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">生产线</label>
                                            <select class="form-select">
                                                <option>所有生产线</option>
                                                <option>M301</option>
                                                <option>M302</option>
                                                <option>M303</option>
                                                <option>M304</option>
                                                <option>M305</option>
                                                <option>M306</option>
                                                <option>M307</option>
                                                <option>M308</option>
                                                <option>M309</option>
                                                <option>M310</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">故障类型</label>
                                            <select class="form-select">
                                                <option>所有故障类型</option>
                                                <option>物料推送装置故障 1001</option>
                                                <option>物料检测装置故障 2001</option>
                                                <option>填装装置检测故障 4001</option>
                                                <option>填装装置定位故障 4002</option>
                                                <option>填装装置填装故障 4003</option>
                                                <option>加盖装置定位故障 5001</option>
                                                <option>加盖装置加盖故障 5002</option>
                                                <option>拧盖装置定位故障 6001</option>
                                                <option>拧盖装置拧盖故障 6002</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">&nbsp;</label>
                                            <button class="btn btn-primary w-100">
                                                <i class="fa fa-file"></i> 生成报表
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 苹果风格的图表配色
            const appleColors = {
                blue: '#0071e3',
                green: '#34c759',
                red: '#ff3b30',
                yellow: '#ffcc00',
                purple: '#af52de',
                orange: '#ff9500',
                pink: '#ff2d55',
                gray: '#8e8e93'
            };
            
            // 故障统计饼图
            const faultPieChart = echarts.init(document.getElementById('faultPieChart'));
            const faultPieOption = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' },
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                series: [
                    {
                        name: '故障分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: '500',
                                color: '#1d1d1f'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 23, name: '物料推送装置', itemStyle: { color: appleColors.blue } },
                            { value: 18, name: '物料检测装置', itemStyle: { color: appleColors.green } },
                            { value: 32, name: '填装装置', itemStyle: { color: appleColors.red } },
                            { value: 15, name: '加盖装置', itemStyle: { color: appleColors.yellow } },
                            { value: 12, name: '拧盖装置', itemStyle: { color: appleColors.purple } }
                        ]
                    }
                ]
            };
            faultPieChart.setOption(faultPieOption);
            
            // 生产线故障实时监测图
            const faultChart = echarts.init(document.getElementById('faultChart'));
            const faultOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            color: '#1d1d1f',
                            borderColor: 'rgba(0, 0, 0, 0.1)',
                            borderWidth: 1
                        }
                    }
                },
                legend: {
                    data: ['M301', 'M302', 'M303', 'M304', 'M305'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 60,
                            fontSize: 11,
                            margin: 15,
                            color: '#6e6e73'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '故障次数',
                        nameLocation: 'middle',
                        nameGap: 30,
                        nameTextStyle: {
                            color: '#6e6e73',
                            fontSize: 11
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#6e6e73'
                        }
                    }
                ],
                series: [
                    {
                        name: 'M301',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0, 113, 227, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(0, 113, 227, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.blue
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [2, 1, 4, 3, 2, 0, 1]
                    },
                    {
                        name: 'M302',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(52, 199, 89, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(52, 199, 89, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.green
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [1, 3, 2, 1, 4, 2, 1]
                    },
                    {
                        name: 'M303',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255, 59, 48, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(255, 59, 48, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.red
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [3, 2, 1, 2, 1, 1, 3]
                    },
                    {
                        name: 'M304',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255, 204, 0, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(255, 204, 0, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.yellow
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [0, 1, 2, 1, 0, 2, 1]
                    },
                    {
                        name: 'M305',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(175, 82, 222, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(175, 82, 222, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.purple
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [2, 1, 1, 3, 2, 1, 0]
                    }
                ]
            };
            faultChart.setOption(faultOption);
            
            // 生产线产量对比图
            const productionChart = echarts.init(document.getElementById('productionChart'));
            const productionOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['平均产量', '最大产量'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['M301', 'M302', 'M303', 'M304', 'M305', 'M306', 'M307', 'M308', 'M309', 'M310'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        fontSize: 11,
                        margin: 15,
                        color: '#6e6e73'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '产量(个)',
                    nameLocation: 'middle',
                    nameGap: 30,
                    nameTextStyle: {
                        color: '#6e6e73',
                        fontSize: 11
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    axisLabel: {
                        fontSize: 11,
                        color: '#6e6e73'
                    }
                },
                series: [
                    {
                        name: '平均产量',
                        type: 'bar',
                        itemStyle: {
                            color: appleColors.blue,
                            borderRadius: [4, 4, 0, 0]
                        },
                        data: [11443, 11938, 11512, 11491, 11949, 11489, 11924, 11897, 11886, 11510]
                    },
                    {
                        name: '最大产量',
                        type: 'bar',
                        itemStyle: {
                            color: appleColors.gray,
                            borderRadius: [4, 4, 0, 0]
                        },
                        data: [11640, 12094, 11640, 11639, 12094, 11640, 12091, 12094, 12095, 11637]
                    }
                ]
            };
            productionChart.setOption(productionOption);
            
            // 合格率分析图
            const qualityChart = echarts.init(document.getElementById('qualityChart'));
            const qualityOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' },
                    formatter: '{a}: {c}%'
                },
                legend: {
                    data: ['平均合格率', '最大合格率', '最小合格率'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['M301', 'M302', 'M303', 'M304', 'M305', 'M306', 'M307', 'M308', 'M309', 'M310'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        fontSize: 11,
                        margin: 15,
                        color: '#6e6e73'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0.97,
                    max: 1.0,
                    name: '合格率',
                    nameLocation: 'middle',
                    nameGap: 30,
                    nameTextStyle: {
                        color: '#6e6e73',
                        fontSize: 11
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    axisLabel: {
                        fontSize: 11,
                        color: '#6e6e73',
                        formatter: '{value:.1%}'
                    }
                },
                series: [
                    {
                        name: '平均合格率',
                        type: 'line',
                        lineStyle: {
                            width: 2,
                            color: appleColors.blue
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [0.9994, 0.9985, 0.9992, 0.9992, 0.9989, 0.9987, 0.9993, 0.9985, 0.9991, 0.9994]
                    },
                    {
                        name: '最大合格率',
                        type: 'line',
                        lineStyle: {
                            width: 2,
                            color: appleColors.green
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0]
                    },
                    {
                        name: '最小合格率',
                        type: 'line',
                        lineStyle: {
                            width: 2,
                            color: appleColors.red
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [0.9934, 0.9806, 0.9875, 0.9875, 0.9872, 0.9872, 0.9880, 0.9873, 0.9865, 0.9891]
                    }
                ]
            };
            qualityChart.setOption(qualityOption);
            
            // 生产线效率分析图
            const efficiencyChart = echarts.init(document.getElementById('efficiencyChart'));
            const efficiencyOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' }
                },
                legend: {
                    data: ['运行效率', '设备利用率'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        fontSize: 11,
                        margin: 15,
                        color: '#6e6e73'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '效率(%)',
                    nameLocation: 'middle',
                    nameGap: 30,
                    nameTextStyle: {
                        color: '#6e6e73',
                        fontSize: 11
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    axisLabel: {
                        fontSize: 11,
                        color: '#6e6e73',
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: '运行效率',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0, 113, 227, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(0, 113, 227, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.blue
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [89.2, 91.5, 90.8, 92.3, 93.1, 92.7, 93.5, 94.2, 93.8, 94.5, 95.1, 95.3]
                    },
                    {
                        name: '设备利用率',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(52, 199, 89, 0.2)'
                                }, {
                                    offset: 1, color: 'rgba(52, 199, 89, 0)'
                                }]
                            }
                        },
                        lineStyle: {
                            width: 2,
                            color: appleColors.green
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [82.5, 83.1, 84.2, 85.7, 86.3, 85.9, 87.1, 87.8, 88.2, 88.7, 89.3, 89.5]
                    }
                ]
            };
            efficiencyChart.setOption(efficiencyOption);
            
            // 月度故障统计图
            const monthlyFaultChart = echarts.init(document.getElementById('monthlyFaultChart'));
            const monthlyFaultOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['故障次数', '故障时长(小时)'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        fontSize: 11,
                        margin: 15,
                        color: '#6e6e73'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '故障次数',
                        nameLocation: 'middle',
                        nameGap: 30,
                        nameTextStyle: {
                            color: '#6e6e73',
                            fontSize: 11
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#6e6e73'
                        }
                    },
                    {
                        type: 'value',
                        name: '故障时长(小时)',
                        nameLocation: 'middle',
                        nameGap: 40,
                        nameTextStyle: {
                            color: '#6e6e73',
                            fontSize: 11
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#6e6e73'
                        }
                    }
                ],
                series: [
                    {
                        name: '故障次数',
                        type: 'bar',
                        itemStyle: {
                            color: appleColors.blue,
                            borderRadius: [4, 4, 0, 0]
                        },
                        data: [32, 28, 25, 22, 19, 17, 15, 13, 11, 9, 8, 7]
                    },
                    {
                        name: '故障时长(小时)',
                        type: 'line',
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 2,
                            color: appleColors.red
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [18.5, 16.2, 14.7, 12.3, 10.1, 8.5, 7.2, 6.8, 5.3, 4.7, 3.9, 3.2]
                    }
                ]
            };
            monthlyFaultChart.setOption(monthlyFaultOption);
            
            // 生产效率趋势图
            const productivityTrendChart = echarts.init(document.getElementById('productivityTrendChart'));
            const productivityTrendOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    textStyle: { color: '#1d1d1f' }
                },
                legend: {
                    data: ['总产量', '人均产量', '单位能耗产量'],
                    top: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: '#6e6e73'
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '18%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        fontSize: 11,
                        margin: 15,
                        color: '#6e6e73'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '总产量(千个)',
                        nameLocation: 'middle',
                        nameGap: 30,
                        nameTextStyle: {
                            color: '#6e6e73',
                            fontSize: 11
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#6e6e73'
                        }
                    },
                    {
                        type: 'value',
                        name: '效率指标',
                        nameLocation: 'middle',
                        nameGap: 40,
                        nameTextStyle: {
                            color: '#6e6e73',
                            fontSize: 11
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#6e6e73'
                        }
                    }
                ],
                series: [
                    {
                        name: '总产量',
                        type: 'bar',
                        yAxisIndex: 0,
                        itemStyle: {
                            color: appleColors.blue,
                            borderRadius: [4, 4, 0, 0]
                        },
                        data: [125, 132, 141, 153, 162, 171, 182, 195, 207, 219, 231, 245]
                    },
                    {
                        name: '人均产量',
                        type: 'line',
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 2,
                            color: appleColors.green
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [2.8, 3.1, 3.3, 3.5, 3.7, 3.9, 4.1, 4.3, 4.5, 4.7, 4.9, 5.1]
                    },
                    {
                        name: '单位能耗产量',
                        type: 'line',
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 2,
                            color: appleColors.purple
                        },
                        symbol: 'circle',
                        symbolSize: 4,
                        emphasis: {
                            focus: 'series',
                            symbolSize: 6
                        },
                        data: [1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0, 2.1, 2.2, 2.3]
                    }
                ]
            };
            productivityTrendChart.setOption(productivityTrendOption);
            
            // 侧边栏与主内容区联动
            document.getElementById('faultLink').addEventListener('click', function() {
                document.querySelector('#fault-tab').click();
                setActiveNavLink('faultLink');
            });
            
            document.getElementById('analysisLink').addEventListener('click', function() {
                document.querySelector('#analysis-tab').click();
                setActiveNavLink('analysisLink');
            });
            
            document.getElementById('schedulingLink').addEventListener('click', function() {
                document.querySelector('#scheduling-tab').click();
                setActiveNavLink('schedulingLink');
            });
            
            document.getElementById('reportsLink').addEventListener('click', function() {
                document.querySelector('#reports-tab').click();
                setActiveNavLink('reportsLink');
            });
            
            // 选项卡切换时同步更新侧边栏激活状态
            document.querySelectorAll('.nav-tabs .nav-link').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.id;
                    let navLinkId;
                    
                    switch(tabId) {
                        case 'fault-tab':
                            navLinkId = 'faultLink';
                            break;
                        case 'analysis-tab':
                            navLinkId = 'analysisLink';
                            break;
                        case 'scheduling-tab':
                            navLinkId = 'schedulingLink';
                            break;
                        case 'reports-tab':
                            navLinkId = 'reportsLink';
                            break;
                        default:
                            navLinkId = '';
                    }
                    
                    if (navLinkId) {
                        setActiveNavLink(navLinkId);
                    }
                });
            });
            
            // 系统概览点击事件
            document.getElementById('sysOverviewLink').addEventListener('click', function() {
                setActiveNavLink('sysOverviewLink');
                // 显示系统概览统计卡片
                document.getElementById('sysOverviewCards').style.display = 'flex';
            });
            
            // 系统设置点击事件
            document.getElementById('settingLink').addEventListener('click', function() {
                setActiveNavLink('settingLink');
                // 隐藏系统概览统计卡片
                document.getElementById('sysOverviewCards').style.display = 'none';
            });
            
            // 设置侧边栏激活状态
            function setActiveNavLink(linkId) {
                document.querySelectorAll('.sidebar .nav-link').forEach(link => {
                    link.classList.remove('active');
                });
                document.getElementById(linkId).classList.add('active');
                
                // 除了系统概览外，其他选项点击时隐藏统计卡片
                if (linkId !== 'sysOverviewLink') {
                    document.getElementById('sysOverviewCards').style.display = 'none';
                }
            }
            
            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                faultPieChart.resize();
                faultChart.resize();
                productionChart.resize();
                qualityChart.resize();
                efficiencyChart.resize();
                monthlyFaultChart.resize();
                productivityTrendChart.resize();
            });
        });
        
        // 更新图表数据（示例方法）
        function updateCharts() {
            // 这里只是示例，实际应用中应该根据筛选条件更新图表数据
            console.log('图表已更新');
        }
    </script>
</body>
</html>
